<template>
  <div>
    <!-- 商品订单 v-if="item.orderType == 1" LIBRARY 资料订单-->
    <div v-if="item" class="parent-order-container">
      <div v-if="item.isSplitted" class="parent-order-header">
        <p>{{ item.createTime }}</p>
        <p>订单号：{{ item.orderSn }}</p>
        <p>您订单中的商品在属不同商家，故拆分为以下订单分开配送，给您带来的不便敬请谅解。</p>
      </div>
      <div v-if="item.isSplitted" class="parent-order-status">
        <p>收货人：{{ item.address.contactPerson }}</p>
        <p>订单金额：¥{{ item.totalPaymentAmount }}</p>
        <p>支付方式: 在线支付</p>
        <p>订单状态：已拆分</p>
        <!-- <p>查看订单详情</p> -->
      </div>
      <div v-if="item.childOrderItems">
        <div v-for="(childOrderItem, childOrderItemIndex) in item.childOrderItems" :key="childOrderItemIndex">
          <div :class="item.isSplitted ? 'child-order-header-splitted' : 'child-order-header'">
            <p>{{ childOrderItem.createTime }}</p>
            <p>订单号：{{ childOrderItem.orderSn }}</p>
            <p v-if="childOrderItem.orderType === 0 && childOrderItem.orderShop && childOrderItem.orderShop.shopName">
              {{ childOrderItem.orderShop.shopName }}
            </p>
          </div>

          <div class="order-container">
            <div class="product leading">
              <div v-if="childOrderItem && childOrderItem.orderShop && childOrderItem.orderShop.orderProductItems">
                <div
                  class="cell"
                  v-for="(orderProductItem, orderProductItemIndex) in childOrderItem.orderShop.orderProductItems"
                  :key="orderProductItemIndex"
                >
                  <div class="product-checkbox-cover">
                    <a-image class="product-cover" :src="orderProductItem.cover" />
                  </div>
                  <p>{{ orderProductItem.archiveName }}</p>
                  <p class="text-center-p">￥{{ orderProductItem.quantity * orderProductItem.retailPrice }}</p>
                  <p class="text-center-p">{{ orderProductItem.quantity }}</p>
                </div>
              </div>
            </div>
            <div class="trailing">
              <div class="wrapper">
                <p class="text-center-p">￥{{ childOrderItem.totalPaymentAmount }}</p>
              </div>
              <div class="wrapper">
                <p class="text-center-p">{{ childOrderItem.address.contactPerson }}</p>
              </div>
              <div class="wrapper">
                <p class="text-center-p">{{ childOrderItem.statusDescription }}</p>
              </div>
              <div class="wrapper">
                <p class="text-center-p" @click="childOrderClick(childOrderItem)">详情</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  name: 'LibraryOrders',
  data() {
    return {}
  },
  props: {
    item: {
      type: Object,
      default: undefined,
      require: true
    }
  },

  computed: {
    ...mapState('order', {
      items: state => state.orders,
      pageSize: state => state.pageSize,
      pageTotal: state => state.pageTotal,
      currentPage: state => state.currentPage,
      originalPage: state => state.originalPage
    })
  },

  components: {},
 
  mounted() {},

  created() {
    //     this.updateList()
  },

  methods: {
    ...mapActions('order', ['getParentOrderListAction', 'updateCurrentPageAction', 'updateOriginalPageAction']),

    currentChange() {},

    childOrderClick(childOrderItem) {
      this.$router.push({
        path: '/order/detail',
        query: { orderId: childOrderItem.id }
      })
    },

    aTabsChange(activeKey) {
      this.getParentOrderListAction(activeKey)
    },

    paginationOnChange(value) {
      this.updateCurrentPageAction(value)
      this.updateList()
    },

    updateList() {
      // const item = this.categories[this.selectedIndex]
      // var categoryId = null
      // if (item) {
      //   categoryId = item.id
      // }
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        // categoryId: this.searchKeywords ? null : categoryId,
        // categoryId: categoryId,
        name: this.searchKeywords
      }
      this.getParentOrderListAction(parameters)
    }
  }
}
</script>

<style scoped lang="less">
h3 {
  padding: 10px 0;
}

.orders-container {
  margin: 40px auto;
  padding: 10px 15px;
  background: white;
}

.product-table-header {
  padding: 0 10px;
  display: grid;
  height: 44px;
  background: var(--r-background-gray);
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 60% auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* text-align: center; */
}

.product-table-header .leading {
  display: grid;
  grid-template-columns: auto 80px 80px;
  align-items: center;
}
.product-table-header .trailing {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.order-container .leading {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product {
  display: flex;
  flex-direction: column;
  align-items: top;
}
.order-container .product .cell {
  padding: 10px 10px;
  display: grid;
  grid-template-columns: 130px auto 80px 80px;
  /* background: rebeccapurple; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product > :last-child {
  border-bottom: 0px;
}

.order-container .trailing {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .trailing .wrapper {
  padding: 10px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container {
  display: grid;
  grid-template-columns: 60% auto;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
}

.parent-order-container {
  margin: 20px 0px;
  padding: 0px 0px;
}

.child-order-header-splitted {
  display: grid;
  grid-template-columns: 12% 25% auto;
  height: 44px;
  align-items: center;
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0px;
  border-bottom: 0px;
}

.child-order-header {
  display: grid;
  grid-template-columns: 12% 30% auto;
  height: 44px;
  align-items: center;
  background: var(--r-background-gray);
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
}
.parent-order-header {
  display: grid;
  grid-template-columns: 12% 25% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
  padding: 0px 20px;
}
.parent-order-status {
  display: grid;
  grid-template-columns: 12% 25% 20% 20% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0px 20px;
}

.product .img {
  margin: 0 10px;
  width: 100px;
  height: 100px;
  background: var(--r-background-gray);
  border-radius: 5px;
}
.product-checkbox-cover {
  display: flex;
  flex-direction: row;
}
.product .a-input-number {
  width: 120px;
}

.product-count-input-container {
  margin-top: -4px;
  display: flex;
  justify-content: center;
}

.product-count-input-container .a-input-number {
  width: 126px;
}

.text-center-p {
  text-align: center;
}

.pagination-container {
  margin: 10px 10px;
}
</style>
